<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>赛制设置</title>
    <link rel="icon" th:href="@{/source/favicon.ico}" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="赛制设置">
    <meta name="description" content="赛制设置">
    <meta name="author" content="lsy">
    <link th:href="@{/source/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/source/css/materialdesignicons.min.css}" href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link th:href="@{/source/css/style.min.css}" href="/css/style.min.css" rel="stylesheet">
    <style>
        /* 给表格添加边框 */
        #groupTable {
            border-collapse: collapse;
            border: 1px solid #ddd;
        }

        /* 给表格的 th 和 td 添加边框 */
        #groupTable th, #groupTable td {
            border: 1px solid #ddd;
            padding: 8px;
        }


        .btn1 {
            background-color: #007bff;
            border-color: #007bff;
            color: #fff;
            font-weight: bold;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease-in-out;
        }

        /* Button hover styles */
        .btn1:hover {
            background-color: #0069d9;
            border-color: #0062cc;
            color: #fff;
        }

        /* Button active styles */
        .btn1:active {
            background-color: #005cbf;
            border-color: #0056b3;
            color: #fff;
        }

        .btn2 {
            background-color: #f65e4a;
            border-color: #f65e4a;
            color: #fff;
            font-weight: bold;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease-in-out;
        }

        /* Button hover styles */
        .btn2:hover {
            background-color: #f51d06;
            border-color: #f51d06;
            color: #fff;
        }

        /* Button active styles */
        .btn2:active {
            background-color: red;
            border-color: red;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a th:href="@{/index}" href="index.html"><img th:src="@{/source/img/logo-sidebar.png}"
                                                              src="images/logo-sidebar.png"
                                                              title="Kun" alt="Kun"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">

                        <li class="nav-item"><a th:href="@{/main}" href="index.html">
                            在线投票系统</a></li>
                        <li sec:authorize="hasRole('3')" class="nav-item"><a th:href="@{/singer}" href="index.html">
                            歌手报名信息</a></li>
                        <li sec:authorize="hasRole('2')" class="nav-item"><a th:href="@{/votepagejudge}"
                                                                             href="index.html">
                            评委投票</a></li>
                        <li sec:authorize="hasRole('1')"><a th:href="@{/battlecontrol}" href="lyear_pages_add_doc.html">PK控制</a></li>
                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">用户管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/user/doSingerList}" href="lyear_pages_gallery.html">歌手管理</a></li>
                                <li><a th:href="@{/user/doJudgeList}" href="lyear_pages_add_doc.html">评委管理</a></li>
                                <li><a th:href="@{/user/doStuffList}" href="lyear_pages_add_doc.html">工作人员管理</a>
                                </li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">投票管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/votepage}" href="lyear_pages_gallery.html">观众投票</a></li>
                                <li><a th:href="@{/votepagejudge}" href="lyear_pages_add_doc.html">评委投票</a></li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">统计管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/votescountlist}" href="lyear_pages_gallery.html">选手得票统计</a></li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">赛制管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/screen}" href="lyear_pages_gallery.html">屏幕管理</a></li>
                                <li><a th:href="@{/battlelist}" href="lyear_pages_add_doc.html">赛制设置</a></li>
                                <li><a th:href="@{/battlecontrol}" href="lyear_pages_add_doc.html">PK控制</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">

                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 系统中心 </span>
                    </div>
                </div>

                <h1><span sec:authorize="hasRole('0')">[管理员]</span><span
                        sec:authentication="principal.username"></span></h1>
                <a th:href="@{/user/logout}" href="#"> 退出登录</a>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <h1>PK控制</h1>
                                    <h2>分组列表</h2>
                                    <!-- 分页栏和分组列表 HTML 代码 -->
                                    <div id="groupContainer">
                                        <table id="groupTable" class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th>组编号</th>
                                                <th>选手A编号</th>
                                                <th>选手B编号</th>
                                                <th>控制</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                        <!-- 分页栏 HTML 代码 -->
                                        <div id="pagination" class="pagination"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" th:src="@{/source/js/jquery.min.js}" src="js/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/perfect-scrollbar.min.js}"
        src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/main.min.js}" src="js/main.min.js"></script>

<script>
    // 每页显示的记录数
    const pageSize = 8;

    // 存储比赛状态
    const gameStatus = {};

    // 获取分组列表
    function showGroups(pageNum, pageSize) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const pageResult = JSON.parse(xhr.responseText);
                updateGroupTable(pageResult.groupList);
                updatePagination(pageResult.currentPage, pageResult.totalPages);
            }
        };
        xhr.open("GET", "/showGroups?pageNum=" + pageNum + "&pageSize=" + pageSize, true);
        xhr.send();
    }

    // 更新分组列表
    function updateGroupTable(groupList) {
        const tbody = document.getElementById("groupTable").getElementsByTagName("tbody")[0];
        tbody.innerHTML = "";
        for (let i = 0; i < groupList.length; i++) {
            const group = groupList[i];
            const tr = document.createElement("tr");
            tr.innerHTML = "<td>" + group.groupId + "</td>" +
                "<td>" + group.userAId + "</td>" +
                "<td>" + group.userBId + "</td>" +
                "<td>" +
                "<button class='btn1' onclick='startPK(" + group.groupId + ")' " +
                (gameStatus[group.groupId] && gameStatus[group.groupId].started ? "disabled" : "") +
                ">" + (gameStatus[group.groupId] && gameStatus[group.groupId].started ? "已开始" : "开始") + "</button>" +
                "<button class='btn2' onclick='endPK(" + group.groupId + ", " + group.userAId + ", " + group.userBId + ")' " +
                (gameStatus[group.groupId] && gameStatus[group.groupId].ended ? "disabled" : "") +
                ">" + (gameStatus[group.groupId] && gameStatus[group.groupId].ended ? "已结束" : "结束") + "</button>" +
                "</td>";
            if (gameStatus[group.groupId] && gameStatus[group.groupId].ended) {
                tr.classList.add("gray");
            }
            tbody.appendChild(tr);
        }
    }

    // 开始PK
    function startPK(groupId) {
        if (gameStatus[groupId] && gameStatus[groupId].started) {
            alert("此比赛已经开始！");
            return;
        }
        for (const id in gameStatus) {
            if (gameStatus[id].started && !gameStatus[id].ended) {
                alert("有比赛正在进行中！");
                return;
            }
        }
        gameStatus[groupId] = {started: true};
        alert("对战开始，投票已通道打开！");
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 处理开始比赛的响应结果
                // 可以在这里更新列表数据或者显示提示信息等等
                console.log(xhr.responseText);
                showGroups(getCurrentPage(), pageSize);
            }
        };
        xhr.open("POST", "/startPK", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("groupId=" + groupId);
    }

    // 结束PK
    function endPK(groupId, userAId, userBId) {
        if (!gameStatus[groupId] || !gameStatus[groupId].started) {
            alert("此比赛还未开始！");
            return;
        }
        if (gameStatus[groupId].ended) {
            alert("此比赛已经完成！");
            return;
        }
        gameStatus[groupId].ended = true;
        alert("对战结束，投票已通道关闭！");
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 处理结束比赛的响应结果
                // 可以在这里更新列表数据或者显示提示信息等等
                console.log(xhr.responseText);
                showGroups(getCurrentPage(), pageSize);
            }
        };
        xhr.open("POST", "/endPK", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("groupId=" + groupId + "&userAId=" + userAId + "&userBId=" + userBId);
    }

    // 获取当前页码
    function getCurrentPage() {
        const activeButton = document.querySelector(".page-buttons button.active");
        return parseInt(activeButton.innerHTML);
    }

    // 更新分页栏
    function updatePagination(currentPage, totalPages) {
        const pagination = document.getElementById("pagination");
        pagination.innerHTML = "";
        if (totalPages > 1) {
            const paginationContainer = document.createElement("div");
            paginationContainer.style.display = "flex";
            paginationContainer.style.justifyContent = "center";

            const prevButton = document.createElement("button");
            prevButton.innerHTML = "上一页";
            prevButton.disabled = (currentPage === 1);
            prevButton.onclick = function () {
                showGroups(currentPage - 1, pageSize);
            };
            paginationContainer.appendChild(prevButton);

            const pageButtons = document.createElement("div");
            pageButtons.className = "page-buttons";
            for (let i = 1; i <= totalPages; i++) {
                const pageButton = document.createElement("button");
                pageButton.innerHTML = i;
                if (i === currentPage) {
                    pageButton.className = "active";
                }
                pageButton.onclick = function () {
                    showGroups(parseInt(this.innerHTML), pageSize);
                };
                pageButtons.appendChild(pageButton);
            }
            paginationContainer.appendChild(pageButtons);

            const nextButton = document.createElement("button");
            nextButton.innerHTML = "下一页";
            nextButton.disabled = (currentPage === totalPages);
            nextButton.onclick = function () {
                showGroups(currentPage + 1, pageSize);
            };
            paginationContainer.appendChild(nextButton);

            pagination.appendChild(paginationContainer);
        }
    }

    // 初始化页面数据
    showGroups(1, pageSize);

</script>
</body>
</html>